<template>
	<view class="content-box">
		<image class="bg" src="/static/me/bg.png" mode="widthFix"></image>
		<navBack text="选择路线" color="#333333"></navBack>
		<view style="position: relative;z-index: 9;">
			<view class="title" v-if="futurePlan.length">
				未来计划
			</view>
			<view class="plan-box" v-for="item in futurePlan">
				<view class="time">
					{{item.startTimeStr}} —— {{item.endTimeStr}}
				</view>
				<view class="location-box">
					<view class="">
						{{item.startCityName}}{{item.startAreaName}}
					</view>
					<image src="/static/car.png" mode="widthFix"></image>
					<view class="">
						{{item.endCityName}}{{item.endAreaName}}
					</view>
				</view>
			</view>
			
			<image v-if="futurePlan.length===0" src="/static/me/unplanned.png" style="width: 564rpx;height: 564rpx;margin: 156rpx auto 0 auto;display: block;" mode=""></image>
			
			<view class="btn" @click="$routeTo('/pages/me/futurePlan/addFuture/addFuture')">
				去添加
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				futurePlan:[]
			}
		},
		onShow() {
			this.upData()
		},
		methods: {
			upData(){
				this.$myRequest('/api/driver/mine/v1/list/itinerary').then(res=>{
					this.futurePlan=res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.content-box{
		padding-top: 220rpx;
		.bg{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
			}
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;
		
			&:before {
				content: '';
				width: 12rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: $theme-color;
			}
		}
		.time{
			font-size: 24rpx;
			color: #999999;
		}
		.plan-box{
			padding: 36rpx 0 54rpx 0;
			margin: 0 20rpx 32rpx 20rpx;
			border-bottom: 2rpx solid #ECECEC;

		}
		.location-box{
			height: 76rpx;
			border: 2rpx dashed rgba(255,120,99,0.651);
			background: linear-gradient(129deg, #FFFFFF 0%, #FFFAD6 49%, #FFFFFF 100%);
			border-radius: 12rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			
			margin-top: 20rpx;
			image{
				width: 65rpx;
			}
			view{
				flex: 1;
			}
		}
		
		.btn{
			width: 420rpx;
			height: 80rpx;
			background: #FFCE4E;
			border-radius: 46rpx;

			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
			
			margin: 450rpx auto 60rpx auto;
		}
	}
</style>
